import { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import './DiscoverPage.css';
import { useFollow } from '../../context/FollowContext.jsx';

// 视频卡片组件，支持鼠标悬停和自动播放视频
export default function VideoCard({ video }) {
  const navigate = useNavigate();
  // 添加状态来跟踪鼠标悬停或触摸
  const [isHovered, setIsHovered] = useState(false);
  // 添加视频引用
  const videoRef = useRef(null);
  // 添加卡片引用，用于监测是否在可视区域内
  const cardRef = useRef(null);
  // 添加状态跟踪是否是移动设备
  const [isMobile, setIsMobile] = useState(false);
  // 添加状态跟踪是否被触摸激活
  const [isTouched, setIsTouched] = useState(false);
  // 添加状态跟踪是否正在滑动
  const [isSwiping, setIsSwiping] = useState(false);
  // 添加触摸事件坐标追踪
  const [touchStartX, setTouchStartX] = useState(0);
  const [touchStartY, setTouchStartY] = useState(0);
  // 添加加载状态
  const [isLoading, setIsLoading] = useState(false);
  // 添加播放按钮淡出状态
  const [isPlayButtonFading, setIsPlayButtonFading] = useState(false);
  // 添加是否在视窗中状态
  const [isInView, setIsInView] = useState(false);
  // 添加图片加载错误状态
  const [imgError, setImgError] = useState(false);
  // 添加图片加载状态
  const [imgLoaded, setImgLoaded] = useState(false);
  // 添加视频错误状态
  const [videoError, setVideoError] = useState(false);
  // 视频是否准备就绪
  const [isVideoReady, setIsVideoReady] = useState(false);
  // 添加视频播放状态
  const [isPlaying, setIsPlaying] = useState(false);
  // 添加滑动开始位置
  const [swipeStartX, setSwipeStartX] = useState(null);
  const [swipeStartY, setSwipeStartY] = useState(null);
  // 添加关注状态
  const [isFollowed, setIsFollowed] = useState(video.isFollow || false);
  // 添加取消关注确认状态
  const [showConfirmUnfollow, setShowConfirmUnfollow] = useState(false);
  
  // 使用关注上下文
  const { isFollowing, followUser, unfollowUser } = useFollow();
  
  // 从上下文获取关注状态覆盖本地状态
  useEffect(() => {
    if (video.username) {
      setIsFollowed(isFollowing(video.id));
    }
  }, [isFollowing, video.id, video.username]);
  
  // 检测设备类型
  useEffect(() => {
    // 检测是否是移动设备
    const checkMobile = () => {
      // 检查是否是触摸设备
      const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
      // 检查屏幕尺寸
      const isSmallScreen = window.innerWidth <= 768;
      
      setIsMobile(isTouchDevice || isSmallScreen);
    };
    
    // 初始检测
    checkMobile();
    
    // 窗口大小改变时重新检测
    window.addEventListener('resize', checkMobile);
    
    return () => {
      window.removeEventListener('resize', checkMobile);
    };
  }, []);
  
  // 检测元素是否在视图中
  useEffect(() => {
    // 创建 Intersection Observer 来检测元素是否在视图中
    const observer = new IntersectionObserver((entries) => {
      // entries 是被观察的元素列表
      entries.forEach(entry => {
        // 当元素进入或退出视图时会触发
        setIsInView(entry.isIntersecting);
        
        // 如果进入视图，预加载视频
        if (entry.isIntersecting && videoRef.current) {
          videoRef.current.load();
        }
      });
    }, {
      // root: null 表示使用视窗作为参考
      root: null,
      // 设置阈值，当元素有50%在视图中时触发回调，优化性能
      threshold: 0.5,
      // 可以设置根边距，扩大或缩小视窗的有效范围
      rootMargin: '0px'
    });
    
    // 开始观察卡片元素
    if (cardRef.current) {
      observer.observe(cardRef.current);
    }
    
    // 清理函数
    return () => {
      if (cardRef.current) {
        observer.unobserve(cardRef.current);
      }
    };
  }, []);
  
  // 处理视频加载和播放，添加懒加载逻辑
  useEffect(() => {
    // 只有在视图中的视频才需要预加载或播放
    if (!isInView) {
      if (videoRef.current && !videoRef.current.paused) {
        videoRef.current.pause();
        videoRef.current.currentTime = 0;
      }
      return;
    }
    
    // 当鼠标悬停、触摸激活或在滑动时，尝试播放视频
    if ((isHovered || isTouched || isSwiping) && videoRef.current) {
      // 设置播放按钮淡出
      setIsPlayButtonFading(true);
      
      // 设置加载状态
      setIsLoading(true);
      
      // 尝试播放视频
      const playPromise = videoRef.current.play();
      
      // 处理可能的播放错误
      if (playPromise !== undefined) {
        playPromise
          .then(() => {
            // 播放成功后关闭加载状态
            setIsLoading(false);
            setIsPlaying(true);
          })
          .catch(error => {
            console.error("视频播放失败:", error);
            setIsLoading(false);
            setVideoError(true);
            setIsPlaying(false);
          });
      }
    } else if (videoRef.current) {
      // 如果视频正在播放，暂停它
      if (!videoRef.current.paused) {
        videoRef.current.pause();
        setIsPlaying(false);
      }
      // 重置播放按钮状态
      setIsPlayButtonFading(false);
      // 重置加载状态
      setIsLoading(false);
    }
  }, [isHovered, isTouched, isInView, isSwiping]);
  
  // 处理点击事件，导航到短视频页面
  const handleClick = (e) => {
    // 如果是滑动，不导航
    if (isSwiping) return;
    // 导航到短视频页面而不是视频详情页
    navigate('/shorts');
  };
  
  // 处理触摸开始事件
  const handleTouchStart = (e) => {
    // 记录触摸开始位置
    setTouchStartX(e.touches[0].clientX);
    setTouchStartY(e.touches[0].clientY);
    // 设置滑动开始位置
    setSwipeStartX(e.touches[0].clientX);
    setSwipeStartY(e.touches[0].clientY);
    // 设置触摸激活状态，使视频可以立即开始播放
    setIsTouched(true);
  };
  
  // 处理触摸移动事件 - 用于滑动检测
  const handleTouchMove = (e) => {
    // 获取当前触摸位置
    const touchX = e.touches[0].clientX;
    const touchY = e.touches[0].clientY;
    
    // 如果没有记录滑动开始位置，直接返回
    if (swipeStartX === null || swipeStartY === null) return;
    
    // 计算水平和垂直移动距离
    const deltaX = Math.abs(touchX - swipeStartX);
    const deltaY = Math.abs(touchY - swipeStartY);
    
    // 如果移动距离大于10像素，认为是在滑动
    if (deltaX > 10 || deltaY > 10) {
      setIsSwiping(true);
      // 在滑动时自动播放视频
      if (videoRef.current && isInView) {
        if (videoRef.current.paused) {
          videoRef.current.play().catch(err => {
            console.error("滑动播放失败:", err);
          });
        }
      }
    } else {
      // 如果移动距离很小，仍然保持触摸状态，确保视频继续播放
      setIsSwiping(false);
    }
  };
  
  // 处理触摸结束事件
  const handleTouchEnd = () => {
    // 如果是轻触而不是滑动，切换触摸状态
    if (!isSwiping) {
      // 保持触摸状态，不要重置，使视频继续播放
    } else {
      // 如果是滑动操作结束，重置滑动状态但保持触摸状态
      setIsSwiping(false);
    }
    
    // 重置滑动开始位置
    setSwipeStartX(null);
    setSwipeStartY(null);
    
    // 注意：我们不在这里重置isTouched，这样视频可以继续播放
    // 用户需要再次点击才会停止播放
  };
  
  // 处理触摸取消事件
  const handleTouchCancel = () => {
    // 重置触摸状态
    setTouchStartX(0);
    setTouchStartY(0);
    setIsSwiping(false);
    // 重置滑动开始位置
    setSwipeStartX(null);
    setSwipeStartY(null);
    // 不重置isTouched状态，保持视频播放
  };
  
  // 处理视频加载事件
  const handleVideoLoad = () => {
    setIsLoading(false);
    setIsVideoReady(true);
    setVideoError(false);
    // 尝试立即播放视频
    if (videoRef.current && (isHovered || isTouched || isSwiping)) {
      videoRef.current.play().catch(err => {
        console.error("自动播放失败:", err);
        setVideoError(true);
      });
    }
  };
  
  // 处理视频错误事件
  const handleVideoError = () => {
    setVideoError(true);
    setIsLoading(false);
    setIsPlaying(false);
    console.error("视频加载失败:", video.video);
    // 显示备用图片
    setImgError(true);
  };
  
  // 处理图片加载错误
  const handleImageError = () => {
    setImgError(true);
    // 设置默认图片
    console.error("封面图片加载失败:", video.img);
  };
  
  // 处理图片加载完成
  const handleImageLoad = () => {
    setImgLoaded(true);
  };
  
  // 获取实际显示的封面图片
  const getCoverImage = () => {
    if (imgError || videoError) {
      // 如果原始图片或视频加载失败，使用默认图片
      return '/vite.svg'; // 使用项目中的默认图片
    }
    return video.img;
  };

  // 处理滑动开始
  const handleMouseDown = (e) => {
    // 记录鼠标开始位置
    setSwipeStartX(e.clientX);
    setSwipeStartY(e.clientY);
    
    // 添加鼠标移动和松开事件
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  // 处理鼠标移动
  const handleMouseMove = (e) => {
    // 如果没有记录滑动开始位置，直接返回
    if (swipeStartX === null || swipeStartY === null) return;
    
    // 计算水平和垂直移动距离
    const deltaX = Math.abs(e.clientX - swipeStartX);
    const deltaY = Math.abs(e.clientY - swipeStartY);
    
    // 如果移动距离大于10像素，认为是在滑动
    if (deltaX > 10 || deltaY > 10) {
      setIsSwiping(true);
      // 在滑动时自动播放视频
      if (videoRef.current && isInView) {
        if (videoRef.current.paused) {
          videoRef.current.play().catch(err => {
            console.error("滑动播放失败:", err);
          });
        }
      }
    }
  };

  // 处理鼠标松开
  const handleMouseUp = () => {
    // 移除鼠标移动和松开事件
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
    
    // 重置滑动状态
    setTimeout(() => {
      setIsSwiping(false);
    }, 200);
    
    // 重置滑动开始位置
    setSwipeStartX(null);
    setSwipeStartY(null);
  };
  
  // 处理关注/取消关注
  const handleFollow = (e) => {
    e.stopPropagation(); // 防止事件冒泡触发视频卡片点击

    if (isFollowed) {
      // 如果已关注，显示确认取消关注的弹窗
      setShowConfirmUnfollow(true);
    } else {
      // 如果未关注，直接关注
      followUser(video.id, video.username);
      setIsFollowed(true);
    }
  };

  // 确认取消关注
  const confirmUnfollow = (e) => {
    e.stopPropagation(); // 防止事件冒泡
    unfollowUser(video.id);
    setIsFollowed(false);
    setShowConfirmUnfollow(false);
  };

  // 取消弹窗
  const cancelUnfollow = (e) => {
    e.stopPropagation(); // 防止事件冒泡
    setShowConfirmUnfollow(false);
  };
  
  // 渲染分类标签
  const renderCategoryTags = () => {
    if (!video.category || video.category.length === 0) return null;
    
    // 只显示主要的一个分类标签
    const mainCategory = video.category.find(cat => cat !== '推荐' && cat !== '附近') || video.category[0];
    
    return (
      <span className="video-category-tag">
        {mainCategory}
      </span>
    );
  };
  
  return (
    <div 
      ref={cardRef}
      className={`video-card ${isTouched ? 'touched' : ''} ${isSwiping ? 'swiping' : ''} ${isInView ? 'in-view' : ''} ${videoError ? 'video-error' : ''} ${isHovered ? 'hovered' : ''} ${isPlaying ? 'playing' : ''}`}
      onClick={handleClick}
      onMouseEnter={() => !isMobile && setIsHovered(true)}
      onMouseLeave={() => !isMobile && setIsHovered(false)}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      onTouchCancel={handleTouchCancel}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      <div className="video-thumb">
        {/* 添加视频分类标签 */}
        {renderCategoryTags()}
        
        {/* 缩略图 */}
        <img 
          src={getCoverImage()}
          alt="视频缩略图"
          onError={handleImageError}
          onLoad={handleImageLoad}
          style={{ display: isPlaying ? 'none' : 'block' }}
        />
        
        {/* 视频元素 */}
        <video
          ref={videoRef}
          preload="metadata"
          muted
          loop
          playsInline
          onCanPlay={handleVideoLoad}
          onError={() => setVideoError(true)}
          style={{ display: isPlaying ? 'block' : 'none' }}
        >
          <source src={video.video} type="video/mp4" />
          您的浏览器不支持视频播放
        </video>
        
        {/* 播放按钮 */}
        <div className={`play-button-overlay ${isPlayButtonFading ? 'fading' : ''}`}>
          <div className="play-button">
            ▶
          </div>
        </div>
        
        {/* 加载指示器 */}
        {isLoading && (
          <div className="loading-indicator">
            <div></div>
          </div>
        )}
        
        {/* 视频错误信息 */}
        {videoError && !isLoading && (
          <div className="video-error-message">
            视频加载失败
            <button onClick={(e) => {
              e.stopPropagation();
              setVideoError(false);
              if (videoRef.current) {
                videoRef.current.load();
              }
            }}>
              重试
            </button>
          </div>
        )}
      </div>
      
      {/* 视频信息覆盖层 */}
      <div className="video-info-overlay">
        <div className="video-user-container">
          <span className="video-username">{video.username}</span>
          <button 
            className={`follow-btn-small ${isFollowed ? 'following' : ''}`}
            onClick={handleFollow}
          >
            {isFollowed ? '已关注' : '关注'}
          </button>
        </div>
        <div className="video-likes">❤️ {video.likes}</div>
      </div>
      
      {/* 确认取消关注对话框 */}
      {showConfirmUnfollow && (
        <div className="confirm-dialog-overlay" onClick={cancelUnfollow}>
          <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
            <div className="confirm-dialog-title">确定取消关注？</div>
            <div className="confirm-dialog-buttons">
              <button className="confirm-dialog-cancel" onClick={cancelUnfollow}>取消</button>
              <button className="confirm-dialog-confirm" onClick={confirmUnfollow}>确定</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
} 